<template>
    <div>
      <el-page-header @back="goBack" :content="user.nickname + '的个人空间'"></el-page-header>

      <!-- 教师个人信息 -->
      <div class="person-box">
    <div class="left-box">
        <img :src="user.user_head" alt="头像" class="avatar">
    </div>
    <div class="right-box">
        <p class="nickname"><strong>{{ user.nickname }}</strong></p>
        <p class="signature">{{ user.remark }}</p>
        <p>性别: {{ getGenderText(user.user_sex) }}</p>
        <p>年龄: {{ user.user_age }}</p>
    </div>
</div>

  <!-- 教师课程信息 -->
  <p>他的课程：</p>
      <div class="course" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-left: auto; margin-right: auto;">
        <div v-for="(video, id) in videos" :key="id"
             style="margin-bottom: 10px;">
          <a @click="goToVideoDetail(videos,id)" style="display: block; width: 260px;">
            <img :src="video.courseLogo || 'default-cover.jpg'"
                 style="width: 100%; height: 150px; object-fit: cover; border-radius: 10px;">
            <p style="margin-top: 5px; text-align: center;">{{ video.courseName }}</p>
            <p>教师：{{ video.lecturerName }}</p>
          </a>
        </div>
      </div>
  
  
    </div>
  
  
  </template>
  
  <script>
import axios from 'axios';
  export default {
    data() {
      return {
      courseId: '',
      username:'',
      user: {}, 
      videos: [], 
      error: '',
      };
    },
    methods: {
      getGenderText(gender) {
        switch (gender) {
            case 1:
                return '男';
            case 2:
                return '女';
            case 3:
                return '保密';
            default:
                return '';
        }},
      goBack() {
        this.$router.go(-1);
        
      },
      goToVideoDetail(videos,id) {
        this.$router.push(`/videoDetail?videos=${encodeURIComponent(JSON.stringify(videos[id]))}`);
  
      },
      async getUserCourse(){
        await axios.post('http://localhost:8081/springboot01/course/getUserCourse',
            {
              username:this.username,
            },
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
        )
            .then(response => {
              console.log('Response data:', response.data);
              if (response.data.msg === "请求成功!") {
               this.videos=response.data.data
            
               
              } else {
                alert(response.data.msg)
              }
            })
            .catch(error => {
              console.error('加载失败', error);
              this.error = '请稍后重试';
            });

      },
      async browseUser(){
       
        
        await axios.post('http://localhost:8081/springboot01/user/browseUser',
            {
              id:this.courseId,
            },
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
        )
            .then(response => {
              console.log('Response data:', response.data);
              if (response.data.msg === "请求成功!") {
               this.user=response.data.data
               this.username=response.data.data.username
               
              } else {
                alert(response.data.msg)
              }
            })
            .catch(error => {
              console.error('加载失败', error);
              this.error = '请稍后重试';
            });
      },

  },
    created() {
      const upINFO=this.$route.params.Id
      if(upINFO!=null){
      localStorage.setItem("up",JSON.stringify(upINFO));
      }
      const upJson = localStorage.getItem("up")
        this.courseId=JSON.parse(upJson)
      this.browseUser().then(() => {
    this.getUserCourse();
  });
     
},
mounted(){
  
},

}
  
  
  </script>
  <style scoped>
.person-box {
    display: flex; /* 使用Flex布局 */
    align-items: center; /* 垂直居中对齐 */
}

.left-box {
    flex: 0 0 auto; /* 不拉伸，不收缩 */
    margin-right: 20px; /* 可根据需要调整图片和文字之间的间距 */
}

.right-box {
    flex: 1 1 auto; /* 伸缩比例，自动调整宽度 */
}

.avatar {
    width: 100px; /* 根据实际情况设置图片宽度 */
    height: 100px; /* 根据实际情况设置图片高度 */
    border-radius: 50%; /* 圆形头像 */
}

  </style>